<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
    1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
    2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
    3.root容器里的代码称为[Vue模板]
-->
<body>
    <!--准备好一个容器-->
    <div class="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <script type="text/javascript">
        //阻止Vue在启动时生成生产提示
        Vue.config.productionTip = false

        //创建一个实例,容器和Vue实例是一一对应的
        new Vue({
            el:'#root', //用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串(id,类等等都可以)
            data:{ //data中用于存储数据,数据供el所指定的容器使用
                name:'机器人'
            }
        })
    </script>
</body>
</html>
